<template>
  <div class="lj-across-power">
    <el-table :data="data" border stripe>
      <el-table-column align="center" prop="btName" label="塔号" width="130" />
      <el-table-column align="center" prop="acrossName" label="控制点" width="120" />
      <el-table-column align="center" prop="acrossX" label="X(m)" width="80" />
      <el-table-column align="center" prop="acrossY" label="Y(m)" width="80" />
      <el-table-column align="center" prop="controlHeight" label="控制距离(m)" width="110" />
      <el-table-column v-for="item in columns" :key="item.label" :label="item.label" align="center" width="">
        <template #default="scoped">
          <div :class="scoped.row[item.prop] <= 0 ? 'isRed' : ''">{{ scoped.row[item.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flooter">
      <span>出口张力TT为负值-表示展放导线或引绳的过程中导线和引绳不会落到该控制点上。</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import useCalculatePower from '@/composables/useCalculatePower'
import { ref } from 'vue'
// const { configId } = defineProps({
//   configId: {
//     type: Number,
//     default: 1,
//   },
// })

type ColumnType = {
  label: string
  prop: string
}
const { power } = useCalculatePower()
const data = ref()
const columns = ref<ColumnType[]>([])

const name = {
  F: '最大弧垂',
  FB: '平视弧垂',
  Hi: '水平张力',
  TT: '出口张力',
}

async function init() {
  // await find(configId)
  const { powerAcross } = power.value!
  /**
   * !获取数据
   */
  data.value = powerAcross.map((p) => ({
    btName: p.across.btName,
    acrossName: p.across.acrossName,
    acrossX: p.across.acrossX,
    acrossY: p.across.acrossY,
    controlHeight: p.across.controlHeight,
    F: p.F.toFixed(2),
    FB: p.FB.toFixed(2),
    Hi: p.Hi.toFixed(2),
    TT: p.TT.toFixed(2),
  }))

  /**
   * !获取列名
   */
  columns.value = Object.entries(name).map(([key, value]) => ({
    label: `${value}${key}(kN)`,
    prop: key,
  }))
}

init()
</script>

<style scoped lang="scss">
.lj-across-power {
  @apply grid grid-rows-[1fr_40px];
  .isRed {
    @apply text-red-500 rounded-full border border-red-500;
  }
  .flooter {
    @apply bg-gray-300 flex items-center px-[20px];
    > span {
      @apply text-sm;
    }
  }
}
</style>
